<template>
  <div
    class="page-common-layout custom-tablePage-container engineeringDesignChange"
  >
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 变更通知单编号 -->
          <a-select
            showSearch
            :filter-option="filterOption"
            v-model="condition.number"
            :loading="condition.numberLoading"
            placeholder="变更通知单编号"
            @change="search($event)"
          >
            <a-select-option
              :value="item.orgCode"
              v-for="item in condition.numberSource"
              :key="item.uuid"
            >
              {{ item.orgName }}
            </a-select-option>
          </a-select>
          <!-- 变更名称 -->
          <a-select
            showSearch
            :filter-option="filterOption"
            v-model="condition.name"
            :loading="condition.nameLoading"
            placeholder="变更名称"
            @change="search($event)"
          >
            <a-select-option
              :value="item.orgCode"
              v-for="item in condition.nameSource"
              :key="item.uuid"
            >
              {{ item.orgName }}
            </a-select-option>
          </a-select>
          <!-- 变更位置 -->
          <a-input
            placeholder="请输入变更位置"
            v-model.trim="condition.position"
            allowClear
          >
          </a-input>
          <!-- 状态 -->
          <a-select
            showSearch
            :filter-option="filterOption"
            v-model="condition.status"
            :loading="condition.statusLoading"
            placeholder="状态"
            @change="search($event)"
          >
            <a-select-option
              :value="item.orgCode"
              v-for="item in condition.statusSource"
              :key="item.uuid"
            >
              {{ item.orgName }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-operate">
        <a-button
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
          @click="handleOperatePage({}, 1)"
        >
          新增
        </a-button>
      </div>
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="orgName" title="变更通知单编号" width="200">
          </vxe-column>
          <vxe-column field="sectype" title="变更名称" width="300">
          </vxe-column>
          <vxe-column field="sectype" title="变更原因" width="300">
          </vxe-column>
          <vxe-column field="userName" title="专业" width="100"> </vxe-column>
          <vxe-column field="sexName" title="变更位置" width="300">
          </vxe-column>
          <vxe-column field="phoneNum" title="变更时间" width="300">
          </vxe-column>
          <vxe-column field="price" title="变更金额" width="250">
            <template #default="{ row }">
              {{ Number(row.price || 0).toLocaleString() }}万元
            </template>
          </vxe-column>
          <vxe-column field="userTypeName" title="状态" width="150">
            <template #default="{ row }">
              <div class="status-td" :class="filterStatusClass(row.status)">
                {{ filterStatusName(row.status) }}
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="240"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip>
                  <template slot="title">
                    提交
                  </template>
                  <icon-fonts
                    icon="icon-fabu-tijiao-tijiaobanben"
                    class="submit"
                    @change="handelSubmit(row)"
                  ></icon-fonts>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    审批
                  </template>
                  <icon-fonts
                    icon="icon-shenpi1"
                    class="approve"
                    @change="handleOperatePage(row, 4)"
                  ></icon-fonts>
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    审批记录
                  </template>
                  <icon-fonts
                    icon="icon-shenpi"
                    class="record"
                    @change="gotoApprovalRecord(row)"
                  ></icon-fonts>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    上传图纸
                  </template>
                  <icon-fonts
                    @change="handleUploadZip(row)"
                    icon="icon-tubiao_tuzhiguanli"
                    class="drawing"
                  ></icon-fonts>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    查看
                  </template>
                  <a-icon
                    type="file-search"
                    @click="handleOperatePage(row, 3)"
                  />
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon
                    type="edit"
                    class="edit-btn"
                    @click="handleOperatePage(row, 2)"
                  />
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    删除
                  </template>
                  <a-icon
                    type="delete"
                    class="delete-btn"
                    @click="handleDelClick(row)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 上传图纸压缩包 -->
    <uploadZipModal :visible.sync="uploadZipModal.visible"></uploadZipModal>
    <!-- 审批记录 -->
    <comment-modal ref="commentModal"></comment-modal>
    <!-- 操作页面 -->
    <operatePage
      :visible.sync="operatePage.visible"
      :pageOperate="operatePage.pageOperate"
      :parameter="operatePage.parameter"
    ></operatePage>
  </div>
</template>

<script>
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
import { pageUserOrganization } from "@/api/videoMonitoring";
//上传压缩包
import uploadZipModal from "./components/uploadZipModal.vue";
//审批记录
import commentModal from "@/pages/workflow/oaLeave/comment.vue";
//操作页面
import operatePage from "./components/operatePage.vue";
export default {
  components: {
    ScreenConditions,
    AssociativeSelectGroup,
    uploadZipModal,
    commentModal,
    operatePage,
  },
  data() {
    return {
      //查询条件
      condition: {
        //变更通知单编号
        number: undefined,
        numberLoading: false,
        numberSource: "",
        //变更名称
        name: undefined,
        nameLoading: false,
        nameSource: "",
        //变更位置
        position: "",
        //状态
        status: undefined,
        statusLoading: false,
        statusSource: "",
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //上传图纸
      uploadZipModal: {
        visible: false,
        fileList: [],
        treeData: [],
      },
      //操作页面
      operatePage: {
        visible: false,
        pageOperate: 1,
        parameter: {},
      },
    };
  },
  computed: {
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
  },
  mounted() {
    Promise.all([this.getTableData()]);
  },
  methods: {
    //提交
    handelSubmit(row) {
      let dataLength = this.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定提交该数据吗？",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that.submitLoading = true;
          submitCheckIssue({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("提交成功", 1.5);
                if (dataLength == 1 && that.pager.page > 1) {
                  that.pager.page -= 1;
                }
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {})
            .finally((_) => {
              that.submitLoading = false;
            });
        },
      });
    },

    //获取列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {} = this.condition;
      pageUserOrganization({
        page,
        pageSize,
        org_code: "",
        userName: "",
      })
        .then((res) => {
          this.tableData = [
            {
              uuid: "CB6CFBBA9AEC46F79413BE983B352424",
              price: 1234567,
              status: 0,
            },
            {
              uuid: "CB6CFBBA9AEC46F79413BE983B352424",
              price: 1234567,
              status: 1,
            },
            {
              uuid: "CB6CFBBA9AEC46F79413BE983B352424",
              price: 1234567,
              status: 2,
            },
            {
              uuid: "CB6CFBBA9AEC46F79413BE983B352424",
              price: 1234567,
              status: 3,
            },
          ];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //状态名称
    filterStatusName(val) {
      switch (val) {
        case 0:
          return "待提交";

        case 1:
          return "已完成";

        case 2:
          return "审批中";

        case 3:
          return "已驳回";

        default:
          return "";
      }
    },

    //状态样式
    filterStatusClass(val) {
      switch (val) {
        //待提交
        case 0:
          return "dtj";
        //已完成
        case 1:
          return "ywc";
        //审批中
        case 2:
          return "spz";
        //已驳回
        case 3:
          return "ybh";

        default:
          return "";
      }
    },

    //查询列表数据
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //重置
    reset() {
      this.condition.number = undefined;
      this.condition.name = undefined;
      this.condition.position = "";
      this.condition.status = undefined;
      this.search();
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //操作
    handleOperatePage(row = {}, type = 1) {
      this.operatePage.pageOperate = type;
      this.operatePage.parameter = row;
      this.operatePage.visible = true;
    },

    //上传图纸
    handleUploadZip() {
      this.uploadZipModal.visible = true;
    },

    //审批记录
    gotoApprovalRecord(record) {
      this.$refs.commentModal.getCommentList(record.uuid);
    },

    //删除
    handleDelClick(row) {
      let dataLength = this.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that
            .$post("/form/formDatabase/formDelete", {
              uuid: row.uuid,
              formUuid: that.tableUuid,
            })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                if (dataLength == 1 && that.pager.page > 1) {
                  that.pager.page -= 1;
                }
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.engineeringDesignChange {
  .table-main {
    .status-td {
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        display: flex;
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8c8c8c;
        margin-right: 8px;
      }
      //待提交
      &.dtj {
        &::before {
          background: #8c8c8c;
        }
      }
      //已完成
      &.ywc {
        &::before {
          background: #239b53;
        }
      }
      //审批中
      &.spz {
        &::before {
          background: #f07f17;
        }
      }
      //已驳回
      &.ybh {
        &::before {
          background: #ff3f4a;
        }
      }
    }
  }
}
</style>
